<!DOCTYPE html>
<html>
<head>
    <title>注册页面</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            text-align: center;
            overflow: hidden; /* 隐藏滚动条 */
        }
        .error-message {
            color: red;
            margin-top: 10px;
        }
        .center-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f4f4f4;
        }

        .login-box {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
        }

        .login-form {
            flex: 1;
            padding: 0 20px;
        }

        .login-image {
            flex: 1;
            padding: 0 20px;
        }

        .login-image img {
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
<header class="fixed-top p-2 bg-dark text-white">
    <h4>个人账单管理系统</h4>
</header>
<div class="container">
    <div class="center-container">
        <div class="login-box">
            <div class="login-image">
                <!-- 左侧图片 -->
                <img src="/register.png" alt="Left Image">
            </div>
            <div class="login-form">
                <!-- 右侧注册表单 -->
                <h2>注册</h2>
                <form id="registerForm" action="/user/register" method="post" onsubmit="return validateForm()">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" class="form-control" name="username" id="username" placeholder="用户名" required>
                        <div class="invalid-feedback">
                            请输入用户名.
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" name="password" id="password" placeholder="密码" required>
                        <div class="invalid-feedback">
                            请输入密码.
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">确认密码</label>
                        <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" placeholder="确认密码" required>
                        <div class="invalid-feedback">
                            请再次输入密码.
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">注册</button>
                    <button type="button" class="btn btn-secondary" onclick="window.location.href='/page/tologin'">返回</button>
                </form>
                <p id="errorMessage" class="error-message"></p>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid fixed-bottom" style="text-align: center; background-color: black;">
    <div class="row">
        <div class="col-sm-12 text-white">
            <small>© Copyright <b>MSoft. All Rights Reserved</b><br />
                <b>Designed by NIIT</b>
            </small>
        </div>
    </div>
</div>
<script>
    document.getElementById("registerForm").addEventListener("submit", function (event) {
        event.preventDefault(); // 阻止表单提交

        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var confirmPassword = document.getElementById("confirmPassword").value;

        if (password !== confirmPassword) {
            document.getElementById("errorMessage").textContent = "密码和确认密码不一致";
            return false;
        }

        axios.post('/User/register', {
            username: username,
            password: password
        })
            .then(function (response) {
                if (response.data.code === 1) {
                    // 注册成功的逻辑
                    window.location.href = "/page/tologin"; // 注册成功后重定向到首页
                } else {
                    // 注册失败的逻辑
                    document.getElementById("errorMessage").textContent =  response.data.msg;
                }
            })
            .catch(function (error) {
                // 处理网络请求错误
                console.error('注册请求失败:', error);
                document.getElementById("errorMessage").textContent = "注册失败1: " + error.message;
            });
    });
</script>
</body>
</html>